<template>
   <div class="headerTop" >
   		<div class="headerTop-wrap wrap" v-if="!isLogin">
            <div>
              <router-link to="/register" class="register">
                  註冊
            </router-link>  
            <router-link to="/forgetPassword" class="forget-password">
                  忘記密碼
            </router-link>
            </div>
            <div @click="loginCheck" class="login">
                  登錄
            </div>
            <div class="user_login">
                <div class="phone-number" >
                    <input type="number" placeholder="請輸入手機號碼" ref="phoneNum"
                    maxlength="7" name="user_mobile" @input="check" v-model="user_mobile">
                </div>
                <div class="password">
                   <input type="password" placeholder="請輸入密碼" 
                   v-model="user_password" @input="check">
                </div>
            </div>
            
            
      </div>
      <div class="headerTop-wrap wrap" v-if="isLogin">
            <div class="quitLogin">
                <div class="user_nickname">
                     {{userProfile.user_nickname}}
                </div>
                <span> | </span>
                <a @click="quit">退出</a>
                
            </div>
      </div>
   </div>
</template>

<script>
import { mapState}  from 'vuex'
import { V1_USER_LOGIN ,V1_SIGNOUT}  from '../config/api'
import md5 from 'js-md5';
export default {
  props:{
    
  },
  components:{
    
  },
  data(){
    return{
        "user_mobile":"",
        "user_password":"",
        "user_nickname":"",
    }
  },
  computed:{
    ...mapState({
        "userProfile":state=>state.app.userProfile
    }),
    isLogin(){
        return this.userProfile;
    }
  },
  mounted(){
    if(this.$route.query.login){
      this.isLogin=true;
    }
  },
  methods:{
    loginCheck(){
          // if(this.user_mobile.length!=0){
            let reg=/^[6][0-9]{7}/;
            if(reg.test(this.user_mobile)&&this.user_password.length!=0) {
               this.$http.get(V1_USER_LOGIN+this.user_mobile+"/"+md5(this.user_password),{
                }).then(res=>{
                    if(res.data.success){
                        this.$store.commit("USER_PROFILE",res.data.infor[0])
                        this.$router.go(0);
                    }else{
                        this.$alert('請重新輸入', res.data.msg, {
                            confirmButtonText: '确定',
                        });
                    }
                })
            }else{
               this.$alert('請重新輸入', '賬號或密碼錯誤', {
                confirmButtonText: '确定',
                });
            }
          // }
    },
    quit(){
        this.$http.put(V1_SIGNOUT,{
        }).then(res=>{
            if(res.data.success){
                this.$store.commit("USER_PROFILE",null);
                this.user_mobile="";
                this.user_password="";
                this.$router.go(0);
            }
        })
    },
    check() {
        if(this.user_mobile.length >= 7) {
            this.user_mobile=this.user_mobile.slice(0, 8);
        }
    },
     open() {
        
      }
  }
}
</script>

<style lang="scss">
    @import "../style/base/_base";
    .headerTop{
      	width:100%;
        background:$color1;
        .headerTop-wrap{
          @include vertical-centering;
          position: relative;
          flex-direction:row-reverse;
          height:50px;
          font-size: 12px;
          color:#fff;
          input{
            width: 155px;
            height:20px;
            background:#0D4A86;
            border:0;
            padding:2.5px 10px;
            margin-right: 15px;
            color: #fff;
          }
          .login,.register,.password,.phone-number{
            margin-right: 20px;color:#fff;
          }
          .forget-password{
            color:#fff;
          }
          .login{
            @include btn1($color6,$color6,#fff);
            width:70px;
            height:15px;
            cursor: pointer;
          }
          .login:hover{
            background: $hover;
          }
          .phone-number {
            input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none !important;
                    margin: 0;
                }
            input[type="number"] {
                   -moz-appearance: textfield;
                }
          }
          .user_login{
            @include flex;
          }
        }
        .quitLogin{
            @include vertical-centering;
            span{
                display: block;
                margin: 0 10px;
                color:$color3;
            }
            a{
                color:#fff;
            }
        }
        
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #FFF;  
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #FFF;
        }

        input:-ms-input-placeholder{
            color: #FFF;
        }

        input::-webkit-input-placeholder{
            color: #FFF;
        }
    }
</style>